<template>
	<view>
		<view>
			<view class="content_select_card_comm" @click="checkCardShow(true)" v-if="selectCard && Object.keys(selectCard).length !==0">
				<view class="select_card_left">
					<up-image :src="selectCard.cardImg" width="90" height="50" bgColor="#f1f6ff00" radius="6"></up-image>
					<view class="select_card_left_info">
						<view class="select_card_left_title">{{selectCard.name}}</view>
						<view class="select_card_left_value">{{selectCard.cardNo}}</view>
					</view>
				</view>
				<up-image src="/static/comm/select.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
			</view>
			<view v-else class="content_select_card_not_data_comm" @click="checkCardShow(true)">
				<view class="_not_data_title">{{$t("common.select.card.placeholder")}}</view>
				<up-image src="/static/comm/select.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
			</view>
		</view>
		<up-popup
			:show="cardShow" 
			:round="10" 
			mode="bottom" 
			@close="checkCardShow(false)" 
			@open="checkCardShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx',
			}"
		>
			<view class="select_card_comm_warp">
				<view class="select_card_title">
					<view></view>
					<view class="select_card_">
						<view :class="cardForm.type === CARD_TYPE.VIRTUAL ? 'select_card_item select_card_item_sel':'select_card_item'" @click="checkCard(CARD_TYPE.VIRTUAL)">{{$t('common.card.virtual')}}</view>
						<view :class="cardForm.type === CARD_TYPE.PHYSICAL ? 'select_card_item select_card_item_sel':'select_card_item'" @click="checkCard(CARD_TYPE.PHYSICAL)">{{$t("common.card.entity")}}</view>
					</view>
					<view class="select_card_title_ok" @click="cardShowOk" >{{$t("common.confirm")}}</view>
				</view>
				<view class="select_card_content">
					<view 
						:class="cardSelect.id === item.id ? 'select_card_item_comm select_card_item_sel_comm':'select_card_item_comm'" 
						v-for="item in cardOption" 
						:key="item.id" 
						@click="selectCardOk(item)"
						v-if="cardOption && cardOption.length!==0"
					>
						<up-image :src="item.cardImg" width="90" height="50" bgColor="#f1f6ff00" radius="6"></up-image>
						<view class="select_card_left_info_comm" >
							<view class="select_card_left_title_comm">{{item.name}}</view>
							<view class="select_card_left_value_comm">{{item.cardNo}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						 <view class="not_data_msg_warp">{{$t('card.details.no')}}</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import { getMyCards } from '@/api/card.js';
	import { CARD_TYPE} from '@/utils/enumUtils.js';
	
	export default {
		name:"card_comm",
		computed: {
			CARD_TYPE() {
		      return CARD_TYPE;
		    },
		},
		data() {
			return {
				cardForm:{
					type:CARD_TYPE.VIRTUAL,
					page:1,
					pageSize:99,
				},
				cardOption:[],
				selectCard:{},
				cardSelect:{},
				cardShow:false,
			};
		},
		mounted() {
		},
		methods: {
			checkCardShow(status){
				if(status){
					this.getMyCardsFun();
				}
				this.cardShow = status;
			},
			// 确认选中卡片
			cardShowOk(){
				this.selectCard= this.cardSelect;
				this.checkCardShow(false);
				this.$emit('getSelectCard',this.cardSelect);
			},
			selectCardOk(item){
				this.cardSelect = item;
			},
			checkCard(key){
				this.cardForm.type = key;
				this.getMyCardsFun();
			},
			/**
			 * 查询我的卡片
			 */
			async getMyCardsFun(){
				const params = this.cardForm;
				const resp = await getMyCards(params);
				if(resp && resp.bizcode === 100){
					this.cardOption = resp.data.entitys;
				}
			},
		}
	}
</script>

<style lang="scss">
.details_content_title{
	font-weight: bold;
	font-size: 32rpx;
	color: #333333;
}

.details_history_title{
	font-size: 28rpx;
	color: #666666;
	margin-top: 30rpx;
}
.details_history_content{
	margin-top: 20rpx;
	height: calc(100vh - 294px);
	overflow: auto;
	.history_content_item{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid  #EEEEEE;
		padding: 30rpx 0;
	}
	.history_content_item_title{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.history_content_item_time{
		font-weight: 300;
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}
	.history_content_item_amount{
		font-size: 28rpx;
		color: #333333;
	}
}
.content_select_card_not_data_comm{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26rpx 38rpx;
	background: #F3F3F3;
	border-radius: 20rpx;
	margin-top: 20rpx;
	._not_data_title{
		font-weight: 500;
		font-size: 28rpx;
		color: #CCCCCC;
	}
}
</style>